{% extends 'base.html' %}
{% load static %}

{% block title %}VisoonSpace - 个人技术博客{% endblock %}

{% block content %}
<!-- 英雄区域 -->
<section class="hero-section">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-8">
                <div class="hero-content">
                    <h1 class="hero-title">你好，我是 <span class="typing-effect">全栈开发者</span></h1>
                    <p class="hero-subtitle">欢迎来到我的技术空间</p>
                    <p class="hero-description">
                        在这里，我分享我的技术见解、开发经验和实用工具。
                        让我们一起探索技术的无限可能，共同成长。
                    </p>
                    <div class="hero-actions">
                        <a href="{% url 'blog:article_list' %}" class="btn btn-tech me-3">
                            <i class="fas fa-blog"></i> 阅读文章
                        </a>
                        <a href="{% url 'tools:tool_list' %}" class="btn btn-outline-light">
                            <i class="fas fa-tools"></i> 探索工具
                        </a>
                    </div>
                </div>
            </div>
            <div class="col-lg-4">
                <div class="hero-image text-center">
                    <i class="fas fa-laptop-code" style="font-size: 15rem; color: rgba(0, 212, 255, 0.3);"></i>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- 特色区域 -->
<section class="py-5">
    <div class="container">
        <div class="row">
            <div class="col-12 text-center mb-5">
                <h2 class="display-5 fw-bold mb-3">我能为你提供什么</h2>
                <p class="lead text-muted">专注于技术分享和工具开发</p>
            </div>
        </div>
        
        <div class="row g-4">
            <div class="col-md-4">
                <div class="tech-card text-center h-100">
                    <div class="card-icon">
                        <i class="fas fa-blog"></i>
                    </div>
                    <h3 class="card-title">技术文章</h3>
                    <p class="card-description">
                        分享前端、后端、DevOps等各个领域的技术文章，
                        从基础概念到高级实践，帮助你提升技术水平。
                    </p>
                </div>
            </div>
            
            <div class="col-md-4">
                <div class="tech-card text-center h-100">
                    <div class="card-icon">
                        <i class="fas fa-tools"></i>
                    </div>
                    <h3 class="card-title">实用工具</h3>
                    <p class="card-description">
                        开发和收集各种实用的开发工具、在线工具，
                        提高开发效率，解决日常开发中的常见问题。
                    </p>
                </div>
            </div>
            
            <div class="col-md-4">
                <div class="tech-card text-center h-100">
                    <div class="card-icon">
                        <i class="fas fa-code"></i>
                    </div>
                    <h3 class="card-title">开源项目</h3>
                    <p class="card-description">
                        参与和维护开源项目，分享代码和最佳实践，
                        与开发者社区一起推动技术发展。
                    </p>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- 最新文章 -->
<section class="py-5 bg-dark">
    <div class="container">
        <div class="row">
            <div class="col-12">
                <div class="d-flex justify-content-between align-items-center mb-4">
                    <h2 class="display-6 fw-bold">最新文章</h2>
                    <a href="{% url 'blog:article_list' %}" class="btn btn-outline-primary">
                        查看全部 <i class="fas fa-arrow-right"></i>
                    </a>
                </div>
            </div>
        </div>
        
        <div class="row g-4">
            {% for article in latest_articles %}
            <div class="col-md-6 col-lg-4">
                <div class="article-card h-100">
                    <div class="article-meta">
                        <i class="fas fa-calendar"></i> {{ article.created_at|date:"Y-m-d" }}
                        <span class="ms-3">
                            <i class="fas fa-eye"></i> {{ article.views }}
                        </span>
                    </div>
                    <h3 class="article-title">
                        <a href="{% url 'blog:article_detail' article.slug %}">{{ article.title }}</a>
                    </h3>
                    <p class="article-excerpt">{{ article.excerpt|truncatewords:20 }}</p>
                    <div class="article-tags">
                        {% for tag in article.tags.all %}
                        <span class="tag">{{ tag.name }}</span>
                        {% endfor %}
                    </div>
                </div>
            </div>
            {% empty %}
            <div class="col-12">
                <div class="text-center py-5">
                    <i class="fas fa-file-alt" style="font-size: 4rem; color: var(--gray-text);"></i>
                    <h3 class="mt-3">暂无文章</h3>
                    <p class="text-muted">敬请期待精彩内容</p>
                </div>
            </div>
            {% endfor %}
        </div>
    </div>
</section>

<!-- 推荐工具 -->
<section class="py-5">
    <div class="container">
        <div class="row">
            <div class="col-12">
                <div class="d-flex justify-content-between align-items-center mb-4">
                    <h2 class="display-6 fw-bold">推荐工具</h2>
                    <a href="{% url 'tools:tool_list' %}" class="btn btn-outline-primary">
                        查看全部 <i class="fas fa-arrow-right"></i>
                    </a>
                </div>
            </div>
        </div>
        
        <div class="row g-4">
            {% for tool in featured_tools %}
            <div class="col-md-6 col-lg-4">
                <div class="tech-card h-100">
                    <div class="d-flex align-items-center mb-3">
                        <div class="card-icon me-3" style="font-size: 2rem;">
                            <i class="{{ tool.icon }}"></i>
                        </div>
                        <h3 class="card-title mb-0">{{ tool.name }}</h3>
                    </div>
                    <p class="card-description">{{ tool.description|truncatewords:15 }}</p>
                    <div class="mt-auto">
                        <a href="{{ tool.url }}" target="_blank" class="btn btn-sm btn-outline-primary">
                            <i class="fas fa-external-link-alt"></i> 访问工具
                        </a>
                    </div>
                </div>
            </div>
            {% empty %}
            <div class="col-12">
                <div class="text-center py-5">
                    <i class="fas fa-tools" style="font-size: 4rem; color: var(--gray-text);"></i>
                    <h3 class="mt-3">暂无工具</h3>
                    <p class="text-muted">敬请期待实用工具</p>
                </div>
            </div>
            {% endfor %}
        </div>
    </div>
</section>

<!-- 联系区域 -->
<section id="contact" class="py-5 bg-dark">
    <div class="container">
        <div class="row">
            <div class="col-lg-8 mx-auto text-center">
                <h2 class="display-6 fw-bold mb-4">让我们保持联系</h2>
                <p class="lead mb-4">
                    如果你有任何问题、建议或者想要合作，欢迎随时联系我。
                </p>
                <div class="row g-3">
                    <div class="col-md-4">
                        <div class="tech-card text-center">
                            <i class="fab fa-github card-icon"></i>
                            <h4>GitHub</h4>
                            <p>查看我的开源项目</p>
                            <a href="https://gitee.com/visoon" class="btn btn-sm btn-outline-primary" target="_blank" rel="noopener noreferrer">访问</a>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="tech-card text-center">
                            <i class="fas fa-envelope card-icon"></i>
                            <h4>邮箱</h4>
                            <p>发送邮件联系我</p>
                            <a href="mailto:visooncs@icloud.com" class="btn btn-sm btn-outline-primary">发送</a>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="tech-card text-center">
                            <i class="fab fa-weixin card-icon"></i>
                            <h4>微信</h4>
                            <p>扫码添加微信</p>
                            <a href="#" class="btn btn-sm btn-outline-primary" data-bs-toggle="modal" data-bs-target="#wechatModal">联系</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- 微信二维码模态框 -->
<div class="modal fade" id="wechatModal" tabindex="-1" aria-labelledby="wechatModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="wechatModalLabel">
                    <i class="fab fa-weixin text-success me-2"></i>微信二维码
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body text-center">
                <img src="{% static 'images/wechat.png' %}" alt="微信二维码" class="img-fluid rounded" style="max-width: 300px;">
                <p class="mt-3 text-muted">扫描二维码添加我的微信</p>
            </div>
            <div class="modal-footer justify-content-center">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>
{% endblock %}